<template>
	<!-- 内容盒子 -->
	<view class="page-root-bg">
		<!-- #ifdef APP-PLUS || H5 -->
		<view style="position: fixed;top: 0;width: 100%;z-index: 9999;"
			:style="{'backgroundColor':barColor?barColor:'','height':ttop}"></view>
		<view :style="{'backgroundColor':barColor?barColor:'','padding-top':ttop}"></view>
		<!-- #endif -->
		<header-view :title="'两代表一委员数字工作平台'" :showLeft="false"></header-view>
		<scroll-view class="content-box" scroll-y :style="{'height':contentHeight}">
			<!-- 我的证件 begin -->
			<view class="content-item my-documents">
				<view class="header">
					<view class="title">我的证件</view>
					<view class="subtitle">更多&nbsp;&gt;</view>
				</view>
				<view class="row">
					<view class="grid" v-for="(card,index) in  cardList" :key="index" :class="'grid_'+index">
						<view class="item">
							<view class="img">
								<image :src="card.icon"></image>
							</view>
							<view class="title">{{card.title}}</view>
						</view>
						<view class="view" @click="cardClick(card)">
							查看证件
						</view>
					</view>
				</view>
			</view>
			<!-- 我的证件 end -->
			<!-- 常用服务 begin -->
			<view class="content-item  open-gift">
				<view class="header">
					<view class="title">常用服务</view>
					<view class="subtitle" @tap="openMyAdvise">更多&nbsp;&gt;</view>
				</view>
				<view class="row">
					<view class="grid">
						<image src="/static/img/home/service-1.png"></image>
						<view class="title">
							最新建议
						</view>
					</view>
					<view class="grid">
						<image src="/static/img/home/service-2.png"></image>
						<view class="title">
							我发起的
						</view>
					</view>
					<view class="grid">
						<image src="/static/img/home/service-3.png"></image>
						<view class="title">
							我联名的
						</view>
					</view>
					<view class="grid" @tap="openMyAdvise">
						<image src="/static/img/home/service-4.png"></image>
						<view class="title">
							提出建议
						</view>
					</view>
					<view class="grid">
						<image src="/static/img/home/service-5.png"></image>
						<view class="title">
							相关法规
						</view>
					</view>
					<view class="grid">
						<image src="/static/img/home/service-6.png"></image>
						<view class="title">
							常见问题
						</view>
					</view>
					<view class="grid">
						<image src="/static/img/home/service-7.png"></image>
						<view class="title">
							履职指南
						</view>
					</view>
					<view class="grid">
						<image src="/static/img/home/service-8.png"></image>
						<view class="title">
							其他
						</view>
					</view>
				</view>
			</view>
			<!-- 常用服务 end -->
			<!-- 新闻动态 begin -->
			<view class="content-item news-list">
				<view class="header">
					<view class="title">新闻动态</view>
					<view class="subtitle">更多&nbsp;&gt;</view>
				</view>
				<view class="row" v-if="newData[0].data.length>0">
					<news-item :info="newData[0].data" bkColor="#fff"></news-item>
				</view>
			</view>
			<!-- 新闻动态 end -->
			<!-- 通知公告 begin -->
			<view class="content-item news-list">
				<view class="header">
					<view class="title">通知公告</view>
					<view class="subtitle">更多&nbsp;&gt;</view>
				</view>
				<view class="row" v-if="newData[1].data.length>0">
					<news-item :info="newData[1].data" bkColor="#fff"></news-item>
				</view>
			</view>
			<!-- 通知公告 end -->
			<!-- #ifdef MP-WEIXIN -->
			<wsWxPrivacy id="privacy-popup"></wsWxPrivacy>
			<!-- #endif -->
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barColor: getApp().globalData.barColor,
				ttop: getApp().globalData.ttop,
				contentHeight: getApp().globalData.winHeight,

				cardList: [{
					title: '新城区第十八次人民代表大会',
					icon: '/static/img/home/documents-1.png',
					url: 'pages/home/documents-detail'
				}, {
					title: '新城区第十八次人民代表大会',
					icon: '/static/img/home/documents-2.png',
					url: 'pages/home/documents-detail'
				}, {
					title: '新城区第十八次人民代表大会',
					icon: '/static/img/home/documents-3.png',
					url: 'pages/home/documents-detail'
				}],

				newData: [{
						newsType: '1', //动态类型1.新闻动态2.通知公告	body	true	
						keyword: '',
						newsTag: '', //动态标签(字典public_news_tag)	body	false	
						pageNo: 1,
						pageSize: 3,
						data: []
					},
					{
						newsType: '2', //动态类型1.新闻动态2.通知公告	body	true	
						keyword: '',
						newsTag: '', //动态标签(字典public_news_tag)	body	false	
						pageNo: 1,
						pageSize: 3,
						data: []
					}
				]
			}
		},
		onLoad() {
			this.getPerformingInfo()
			this.queryPublicNews()
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		methods: {
			getPerformingInfo() {
				this.$api.common.getPerformingInfo({
					authType: 1, //履职身份类型(1.党代表 2.政协委员 3.人大代表)
				}).then((res) => {
					console.log(res, "userInfo============");
					if (res.code == 200) {} else {
						this.$modal.toast(res.message)
					}
				})
			},
			// 获取动态
			queryPublicNews() {
				this.newData.map(item => {
					this.$api.common.queryPublicNews(item).then((res) => {
						if (res.code == 200) {
							item.data = res.result.records || []
						} else {
							this.$modal.toast(res.message)
						}
					})
				})
			},
			cardClick(card) {
				this.$jump.toJump(card.url)
			},
			openMyAdvise() {
				uni.navigateTo({
					url: '/pages/home/my-advise'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.grid_0 {
		background-image: url(@/static/img/home/documents-bg-1.png);
	}

	.grid_1 {
		background-image: url(@/static/img/home/documents-bg-2.png);
	}

	.grid_2 {
		background-image: url(@/static/img/home/documents-bg-3.png);
	}

	.page-root-bg {
		width: 100vw;
		height: 100vh;
		background: url('@/static/img/bg.png');
		background-size: 100% 100%;

		.content-box {
			width: 100%;
			height: 88%;
			padding: 20rpx;
		}
	}

	.content-item {
		padding: 20rpx;
		background-color: $bg-color-white;
		border-radius: $border-radius-lg;
		margin-bottom: 20rpx;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.title {
				font-size: $font-size-lg;
				font-weight: 500;
			}

			.subtitle {
				font-size: $font-size-base;
				color: $text-color-grey;
			}
		}

		.row {
			display: flex;
			flex-wrap: wrap;

			.grid {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 10rpx 0;
				// padding: 20rpx;

				image {
					width: 70rpx;
					height: 70rpx;
					margin-bottom: $spacing-row-base;
				}

				.title {
					font-size: $font-size-base;
					color: $text-color-base;
					display: flex;
					align-items: baseline;
				}
			}

		}
	}

	.content-item:last-child {
		margin-bottom: 0;
	}

	.my-documents {
		.grid {
			width: 100% !important;
		}

		.row {
			.grid {
				// background-image: url(@/static/img/home/documents-bg-1.png);
				background-size: 100% 100%;
				align-items: start;
				padding: 0;

				.item {
					display: flex;
					align-items: center;
					padding: 20rpx;

					image {
						margin-bottom: 0;
					}

					.title {
						padding: 0 30rpx;
					}
				}

				.view {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 100%;
					background-color: rgba(255, 255, 255, 0.6);
					padding: 10rpx 0;
				}
			}



		}
	}

	.news-list {
		.grid {
			width: 100% !important;
		}

		.row {
			.grid {
				flex-direction: unset;
				align-items: start;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #c7c7c7;

				img {
					width: 180rpx;
					height: 150rpx;
					margin-bottom: 0;
				}

				image {
					width: 180rpx;
					height: 150rpx;
					margin-bottom: 0;
					border-radius: $border-radius-lg;
				}

				.info {
					margin: 10rpx 0 10rpx 30rpx;
				}

				.title {
					align-items: center;
					// padding: 20rpx;
				}

				.time {
					margin-top: 20rpx;
					color: #ababab;
				}

				.view {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 100%;
					/* height: 100%; */
					background-color: rgba(255, 255, 255, 0.6);
					padding: 10rpx 0;
				}
			}

			.grid:last-child {
				border-bottom: 0rpx solid #c7c7c7;
			}
		}
	}
</style>